<template>
  <div ref="el" class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div class="dataScreen-header flex-space-between">
        <div class="header-lf">
          <span class="header-screening">今日入校数据统计</span>
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>校园出入大屏</span>
          </div>
        </div>
        <div class="header-ri">
          <span class="header-time">{{ time }}</span>
          <div @click="toggle" style="padding-top: 5px;">
            <img src="../images/full-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="top-tabs">
        <div class="tab-item">
          <img class="item-img" src="../images/in-out-item1.png" alt="" />
          应到：
          <div class="num">{{ shouldNum }}</div>
          人
        </div>
        <div class="tab-item">
          <img class="item-img" src="../images/in-out-item2.png" alt="" />
          已到：
          <div class="num">{{ reallyNum }}</div>
          人
        </div>
        <div class="tab-item">
          <img class="item-img" src="../images/in-out-item3.png" alt="" />
          未到：
          <div class="num">{{ notNum }}</div>
          人
        </div>
        <div class="tab-item">
          <img class="item-img" src="../images/in-out-item4.png" alt="" />
          请假：
          <div class="num">{{ leaveNum }}</div>
          人
        </div>
        <div class="tab-item">
          <img class="item-img" src="../images/in-out-item5.png" alt="" />
          迟到：
          <div class="num">{{ studentDayStatData?.arriveLateNum }}</div>
          人
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="main-lf">
          <div class="dataScreen-top">
            <div class="screen-panel_title flex-center">
              <div class="title">学校人员出入记录</div>
            </div>
            <div class="main">
              <div class="item" v-for="(item, index) in recordList" :key="index">
                <div>
                  <img class="item-img" :src="item.capturePhoto || 'https://via.placeholder.com/100'"
                    @error="defaultImg" alt="" />
                </div>
                <div class="item-name">{{ item.userName || '陌生人' }}</div>
                <div class="item-time">{{ item.clockingTime }}</div>
              </div>
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="screen-panel_title flex-center">
              <div class="title">请假人员出入记录</div>
            </div>

            <div class="main-box">
              <div class="item" :class="[item.inOutMark === 2 && 'outItem']" v-for="(item, index) in leaveRecordList"
                :key="index">
                <div class="item-img">
                  <img class="item-img" @error="defaultImg"
                    :src="item.capturePhoto || 'https://via.placeholder.com/100'" alt="" />
                </div>
                <div>
                  <div class="name">{{ item.userName || '陌生人' }}</div>
                  <div class="leaveType">{{ ['[事假]', '[病假]', '[公假]'][item.leaveType] }}</div>
                  <div class="class">{{ item.className || '-' }}</div>
                </div>
                <div class="enter-btn" :class="[item.inOutMark === 2 && 'out']">{{ item.inOutMark == 1 ? '进' : '出' }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main-ct">
          <div class="dataScreen-top">
            <div class="top-box">
              <div class="video-box">
                <div class="title-box">
                  <div class="title">实时人员出入动态</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="dataScreen-bottom">
            <div class="tab-box">
              <div class="tab-item flex-center" v-for="(item, index) in tabsData" :key="index"
                @click="tabItemClick(index)">
                <div v-if="index === tabItemIndex" class="active"></div>
                {{ item }}
              </div>
            </div>
            <div class="scroll-box">
              <vue3-seamless-scroll :list="recordList1" direction="left" hover>
                <div class="scroll-box-wrap">
                  <div class="item" v-for="(item, index) in recordList1" :key="index">
                    <div><img class="index-img" :src="item.capturePhoto || 'https://via.placeholder.com/100'" alt="" /></div>
                    <div>{{ item.userId ? item.userName : '陌生人' }}</div>
                    <div>{{ item.clockingTime }}</div>
                  </div>
                </div>
              </vue3-seamless-scroll>
            </div>
          </div> -->
        </div>
        <div class="main-ri">
          <div class="dataScreen-top">
            <div class="screen-panel_title flex-center">
              <div class="title">陌生人记录</div>
            </div>
            <div class="item-box">
              <vue3-seamless-scroll :list="strangerRecordList" hover>
                <div class="scroll-box-wrap">
                  <div class="item" v-for="(item, index) in strangerRecordList" :key="index">
                    <div><img class="item-img" :src="item.capturePhoto || 'https://via.placeholder.com/100'"
                        @error="defaultImg" alt="" /></div>
                    <div>
                      <div class="name">{{ item.userName || '陌生人' }}</div>
                      <div class="time">
                        <el-icon>
                          <PieChart />
                        </el-icon>
                        {{ item.clockingTime }}
                      </div>
                      <div>
                        <el-icon>
                          <LocationInformation />
                        </el-icon>
                        {{ item.deviceName }}
                      </div>
                    </div>
                  </div>
                </div>
              </vue3-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataScreen">
import { studentDayStat, deviceClockingRecordList, deviceInfoList } from '@/api/bigScreen';
import { LocationInformation, PieChart } from '@element-plus/icons-vue'
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useDateFormat, useFullscreen } from '@vueuse/core'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const el = ref<HTMLElement>();
const { toggle } = useFullscreen(el);
const dataScreenRef = ref<HTMLElement | null>(null);
const deviceList = ref<any>([])
onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
  const deviceRes = deviceInfoList({ type: '1,4' })
  deviceList.value = deviceRes.data
  init()
});
const studentDayStatData = ref<any>({})
const recordList = ref<any>([])
const strangerRecordList = ref<any>([])
const leaveRecordList = ref<any>([])
const init = async () => {
  const studentDayStatRes = await studentDayStat()
  studentDayStatData.value = studentDayStatRes.data
  getSchoolRecordList(1)
  getStrangerRecordList(2)
  getLeaveRecordList()
};
const shouldNum = computed(() => {
  return studentDayStatData?.value?.normalNum + studentDayStatData?.value?.arriveLateNum + studentDayStatData?.value?.absenceNum + studentDayStatData?.value?.leaveNum + studentDayStatData?.value?.leaveEarlyNum
})
const reallyNum = computed(() => {
  return studentDayStatData?.value?.normalNum + studentDayStatData?.value?.arriveLateNum + studentDayStatData?.value?.leaveEarlyNum
})
const notNum = computed(() => {
  return studentDayStatData?.value?.leaveNum + studentDayStatData?.value?.absenceNum
})
const leaveNum = computed(() => {
  return studentDayStatData?.value?.leaveNum
})
const getSchoolRecordList = async (persionType: number) => {
  const recordListRes = await deviceClockingRecordList({
    persionType
  })
  recordList.value = recordListRes.rows.map((item: any) => {
    item.clockingTime = useDateFormat(item.clockingTime, 'HH:mm:ss')
    return item
  })
}
const getStrangerRecordList = async (persionType: number) => {
  const recordListRes = await deviceClockingRecordList({
    persionType
  })
  strangerRecordList.value = recordListRes.rows.map((item: any) => {
    item.clockingTime = useDateFormat(item.clockingTime, 'HH:mm:ss')
    return item
  })
}
const getLeaveRecordList = async () => {
  const leaveListRes = await deviceClockingRecordList({
    isLeave: false
  })
  leaveRecordList.value = leaveListRes.rows
}
const defaultImg = (e: any) => {
  e.target.src = 'https://via.placeholder.com/100'
};
// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
const formatDate = () => {
  // 获取当前时间
  const now = new Date();
  // 获取年、月、日、时、分、秒
  const year = now.getFullYear();
  const month = ("0" + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1
  const day = ("0" + now.getDate()).slice(-2);
  const hours = ("0" + now.getHours()).slice(-2);
  const minutes = ("0" + now.getMinutes()).slice(-2);
  const seconds = ("0" + now.getSeconds()).slice(-2);
  const formattedTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  // 格式化输出
  return formattedTime;
};
// 获取当前时间
let timer;
let time = ref(formatDate());
timer = setInterval(() => {
  time.value = formatDate();
}, 1000);

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  clearInterval(timer);
});
</script>
<style lang="scss" scoped>
@import "../entrance.scss";
</style>
